<template>
  <div class="style-page">
    <div class="head-page-title">{{ showComponentData.title }}</div>
    <div class="line"></div>

    <div class="component-style">
      <div class="header">
        <p class="title">内容样式</p>
      </div>
      <el-form :model="form" label-width="auto">
        <el-form-item label="活动背景">
          <div class="avatar-uploader" @click="handleSelectActivityImage">
            <el-image
              v-if="showComponentData.activity_bg"
              :src="showComponentData.activity_bg"
              class="avatar"
              fit="cover"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"
              ><el-icon> <Plus /> </el-icon
            ></i>
            <div v-if="showComponentData.activity_bg" class="mask">替换</div>
            <el-icon
              v-if="showComponentData.activity_bg"
              class="del-image"
              :size="20"
              @click.stop="handleDelActivity"
            >
              <CircleCloseFilled />
            </el-icon>
          </div>
        </el-form-item>
        <el-form-item label="标题文字">
          <el-input
            v-model="showComponentData.flash_name"
            maxlength="12"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="标题颜色">
          <el-color-picker v-model="form.nameColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.nameColor">
            <template #append>
              <el-button @click="form.nameColor = '#333333'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="标题大小">
          <div class="flex">
            <el-slider style="width: 70%" v-model="form.nameFontSize" :min="12" :max="30" />
            <el-input
              type="number"
              style="width: 30%; margin-left: 20px"
              v-model.number="form.nameFontSize"
              :min="12"
              :max="16"
            >
              <template #append>px</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="查看更多">
          <el-color-picker v-model="form.moreColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.moreColor">
            <template #append>
              <el-button @click="form.moreColor = '#fff'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品名称">
          <el-radio-group v-model="showComponentData.show_item_name">
            <el-radio :value="0">不显示</el-radio>
            <el-radio :value="1">一行</el-radio>
            <el-radio :value="2">两行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="商品颜色">
          <el-color-picker v-model="form.titleColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.titleColor">
            <template #append>
              <el-button @click="form.titleColor = '#333333'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="文字粗细">
          <el-radio-group v-model="form.titleFontWeight">
            <el-radio label="正常" :value="0" />
            <el-radio label="加粗" :value="600" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="文字大小">
          <div class="flex">
            <el-slider style="width: 70%" v-model="form.titleFontSize" :min="12" :max="30" />
            <el-input
              type="number"
              style="width: 30%; margin-left: 20px"
              v-model.number="form.titleFontSize"
              :min="12"
              :max="30"
            >
              <template #append>px</template>
            </el-input>
          </div>
        </el-form-item>
        <!--        <el-form-item label="描述内容">-->
        <!--          <el-radio-group v-model="showComponentData.show_item_desc">-->
        <!--            <el-radio :value="0">不显示</el-radio>-->
        <!--            <el-radio :value="1">一行</el-radio>-->
        <!--            <el-radio :value="2">两行</el-radio>-->
        <!--          </el-radio-group>-->
        <!--        </el-form-item>-->
        <el-form-item label="倒计时颜色">
          <el-color-picker v-model="form.countDownColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.countDownColor">
            <template #append>
              <el-button @click="form.countDownColor = '#ff3c29'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="商品售卖价格颜色">
          <el-color-picker v-model="form.priceColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.priceColor">
            <template #append>
              <el-button @click="form.priceColor = '#FF3C29'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
    </div>

    <div class="add-area">
      <p class="add-title">内容</p>
      <VueDraggable
        v-model="showComponentData.default_sub_list"
        :animation="150"
        ghostClass="ghost"
        class="content"
        @end="handleUpdateComponent"
      >
        <div
          class="goods-item"
          v-for="(item, index) in showComponentData.default_sub_list"
          :key="item.id"
        >
          <div class="left">
            <div class="avatar-uploader" @click="handleChangeImage(index)">
              <el-image
                v-if="item.activityCommodityAoList"
                :src="item.activityCommodityAoList[0].image"
                class="avatar"
                fit="cover"
              ></el-image>
              <i v-else class="el-icon-plus avatar-uploader-icon"
                ><el-icon> <Plus /> </el-icon
              ></i>

              <div
                v-if="item.activityCommodityAoList && item.activityCommodityAoList[0].image"
                class="mask"
                >替换</div
              >
              <el-icon
                v-if="item.activityCommodityAoList && item.activityCommodityAoList[0].image"
                class="del-image"
                :size="20"
                @click.stop="handleDelImg(index)"
              >
                <CircleCloseFilled />
              </el-icon>
            </div>
          </div>

          <div class="right">
            <p class="text" style="font-weight: bold">{{
              (item.activityCommodityAoList && item.activityCommodityAoList[0].name) ||
              '此处显示内容标题'
            }}</p>
            <div class="flex">
              <!--              <span class="discount">¥{{ item.activityPrice }}</span>-->
              <!--              <del>¥{{ item.originalPrice }}</del>-->
              <span class="original-text">¥{{ item.activityPrice }}</span>
              <del class="discount-text">¥{{ item.originalPrice }}</del>
            </div>
          </div>
          <el-icon class="del-icon" :size="16" color="red" @click="handleDel(index)">
            <CircleCloseFilled />
          </el-icon>
        </div>
        <el-tag type="primary" class="submit-btn" @click="handleAdd">添加活动</el-tag>
      </VueDraggable>
    </div>

    <div class="component-style">
      <common-style
        :content-data="showComponentData"
        @update-style="handleUpdateStyle"
      ></common-style>
    </div>

    <flash-product-dialog
      v-if="showFlashGoodsDialog"
      :show-goods-dialog="showFlashGoodsDialog"
      :default-active-id="showComponentData.activityId"
      @close-dialog="handleCloseGoodsDialog"
    ></flash-product-dialog>

    <link-list-dialog
      v-if="showLinkDataDialog"
      :show-link-dialog="showLinkDataDialog"
      @close-dialog="showLinkDataDialog = false"
    ></link-list-dialog>

    <image-selected-dialog
      v-if="showImageChooseDialog"
      :single-type="true"
      :operation-type="false"
      :show-image-choose-dialog="showImageChooseDialog"
      @close-dialog="handleCloseImageDialog"
    ></image-selected-dialog>
  </div>
</template>

<script setup lang="ts">
  import CommonStyle from '@/views/decoration/diyComponents/CommonStyleComponent/CommonStyle.vue'
  import { VueDraggable } from 'vue-draggable-plus'
  import { Plus, CircleCloseFilled } from '@element-plus/icons-vue'
  import debounce from 'lodash/debounce'
  import { reactive, ref, toRaw } from 'vue'
  import FlashProductDialog from '@/views/decoration/diyComponents/FlashProductDialog.vue'
  import LinkListDialog from '@/views/decoration/diyComponents/LinkListDialog.vue'
  import ImageSelectedDialog from '@/views/decoration/diyComponents/ImageSelectedDialog.vue'

  const props = defineProps({
    contentData: {
      type: Object,
      default: () => ({})
    }
  })

  const emit = defineEmits(['updateData'])

  const showComponentData = ref(props.contentData)
  const showFlashGoodsDialog = ref(false)
  const showLinkDataDialog = ref(false)
  const selectedData = ref()
  const showImageChooseDialog = ref(false)
  const changeIndex = ref()

  interface FormData {
    titleFontSize: number
    titleColor: string
    titleFontWeight: number
    countDownColor: string
    priceColor: string
    nameColor: string
    nameFontSize: number
    moreColor: string
  }

  const form = reactive<FormData>({
    titleFontSize: 14,
    titleColor: '#333333',
    titleFontWeight: 600,
    countDownColor: '#ff3c29',
    priceColor: '#e74c3c',
    nameColor: '#fff',
    nameFontSize: 18,
    moreColor: '#fff'
  })

  watch(
    form,
    () => {
      emitFormUpdate()
    },
    { deep: true }
  )

  const emitFormUpdate = debounce(() => {
    const raw = toRaw(form)
    showComponentData.value.itemStyle = {
      title: {
        fontSize: raw.titleFontSize,
        color: raw.titleColor,
        fontWeight: raw.titleFontWeight
      },
      countDownColor: {
        color: raw.countDownColor
      },
      price: {
        color: raw.priceColor
      }
    }

    showComponentData.value.titleStyle = {
      fontSize: raw.nameFontSize,
      color: raw.nameColor,
      fontWeight: 'bold'
    }

    showComponentData.value.moreStyle.color = raw.moreColor
    handleUpdateComponent()
  }, 300)

  // function handleSuccess(file: any, index: number) {
  //   showComponentData.value.default_sub_list[index].image = file.data.url
  //   handleUpdateComponent()
  // }

  function handleChangeImage(index: number) {
    changeIndex.value = index
    showImageChooseDialog.value = true
  }

  function handleCloseGoodsDialog(value: any) {
    if (value) {
      showComponentData.value.activityId = value.id
      showComponentData.value.startTime = value.startTime
      showComponentData.value.endTime = value.endTime
      showComponentData.value.default_sub_list = value.activityContentAoList

      // 移除默认项
      showComponentData.value.default_sub_list = showComponentData.value.default_sub_list.filter(
        (item: any) => !item.isDefault
      )
    }
    showFlashGoodsDialog.value = false
  }

  function handleAdd() {
    showFlashGoodsDialog.value = true
  }

  function handleDel(index: number) {
    showComponentData.value.default_sub_list.splice(index, 1)
    if (showComponentData.value.default_sub_list.length === 0) {
      selectedData.value = {}

      showComponentData.value.default_sub_list.push({
        image: 'https://image.lutongjiakao.com/system/82895dd1bc8c4960b05f552446bf5c76.png',
        name: '此处显示商品标题，最多两行',
        remark: '此处显示描述，最多两行',
        price: '99',
        show_desc: true,
        show_price: true,
        isDefault: true
      })
    }
    handleUpdateComponent()
  }

  function handleCloseImageDialog(value: any) {
    if (value) {
      if (Array.isArray(value)) {
        showComponentData.value.default_sub_list.push(...value)
      } else {
        if (changeIndex.value === -1) {
          showComponentData.value.activity_bg = value.fileUrl
        } else {
          showComponentData.value.default_sub_list[
            changeIndex.value
          ].activityCommodityAoList[0].image = value.fileUrl
        }
      }
      handleUpdateComponent()
    }
    showImageChooseDialog.value = false
  }

  function handleSelectActivityImage() {
    showImageChooseDialog.value = true
    changeIndex.value = -1
  }

  function handleDelImg(index: number) {
    showComponentData.value.default_sub_list[index].activityCommodityAoList[0].image = ''
    handleUpdateComponent()
  }

  function handleDelActivity() {
    showComponentData.value.activity_bg = ''
  }

  function handleUpdateComponent() {
    emit('updateData', showComponentData.value)
  }

  function handleUpdateStyle(val: any) {
    showComponentData.value.style = val
    handleUpdateComponent()
  }

  onMounted(() => {
    if (showComponentData.value.itemStyle.title) {
      form.titleFontSize = showComponentData.value.itemStyle.title.fontSize
      form.titleColor = showComponentData.value.itemStyle.title.color
      form.titleFontWeight = showComponentData.value.itemStyle.title.fontWeight

      form.countDownColor = showComponentData.value.itemStyle.countDownColor.color

      form.priceColor = showComponentData.value.itemStyle.price.color
    }

    if (showComponentData.value.titleStyle.fontSize) {
      form.nameFontSize = showComponentData.value.titleStyle.fontSize
      form.nameColor = showComponentData.value.titleStyle.color
    }

    if (showComponentData.value.moreStyle.color) {
      form.moreColor = showComponentData.value.moreStyle.color
    }
  })
</script>

<style scoped lang="scss">
  .style-page {
    padding: 20px;

    .head-page-title {
      padding-top: 10px;
      padding-bottom: 20px;
      font-size: 18px;
      font-weight: bold;
      color: black;
    }

    .line {
      width: 100%;
      height: 1px;
      background: #f5f7fa;
    }

    .layout-section {
      padding: 20px;

      .tip-title {
        margin-bottom: 8px;
        font-weight: bold;
      }
    }

    .add-area {
      .add-title {
        font-size: 14px;
        color: black;
        font-weight: bold;
        margin-bottom: 20px;
      }

      .content {
        .goods-item {
          display: flex;
          align-items: stretch;
          padding: 10px;
          border: 1px solid #eee;
          border-radius: 6px;
          margin-bottom: 12px;
          position: relative;
          cursor: pointer;

          &:hover .del-icon {
            display: block;
          }

          .left {
            width: 70px;
            margin-right: 12px;
          }

          .right {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            font-size: 14px;
            // font-weight: bold;
            color: #606266;

            flex-shrink: 0;

            .original-text {
              font-size: 16px;
              margin-right: 5px;
              color: rgb(255, 60, 41);
            }

            .discount-text {
              color: #949494;
              font-size: 12px;
            }
          }

          .del-icon {
            display: none;
            position: absolute;
            top: 0;
            right: 0;
            cursor: pointer;
            color: #8c939d;
          }
        }
      }
    }

    .submit-btn {
      width: 100%;
      height: 40px !important;
      cursor: pointer;
      font-size: 14px;
    }

    .avatar-uploader {
      width: 70px;
      height: 70px;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;

      .mask {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 24px;
        background-color: rgba(0, 0, 0, 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        color: #fff;
        font-size: 12px;
      }

      .del-image {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #8c939d;
      }

      &:hover .mask {
        opacity: 1;
      }

      &:hover .del-image {
        display: block;
      }

      .avatar {
        width: 100%;
        height: 70px;
        object-fit: cover;
      }

      .avatar-uploader-icon {
        font-size: 28px;
        color: #aaa;
      }
    }

    .component-style {
      margin: 20px 0;

      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .title {
          font-size: 14px;
          font-weight: bold;
          color: black;
        }
      }

      .flex {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0 3px;
      }
    }
  }
</style>
